<script>
import config from '@/components/FreeForm/minix/config'
import { useDictAll } from '@/api/system/dict'
import { isEmpty } from 'lodash'

export default {
  name: 'GeneralField',
  mixins: [config],
  data() {
    return {
      dictCache: []
    }
  },
  methods: {
    querySearch(queryString, cb) {
      if (this.dictCache.length > 0) {
        return cb(this.like(queryString))
      }
      useDictAll({}).then(resp => {
        const { data } = resp
        this.dictCache = data || []
        this.dictCache.forEach(d => { d.value = d.dictName })
        return cb(this.like(queryString))
      })
    },
    handleSelect(item) {
      this.element.dictKey = item.dictType
      this.dynamicOnlineSave()
    },
    like(q) {
      if (isEmpty(q)) {
        return this.dictCache
      }
      return this.dictCache.filter(e => e.dictName.includes(q) || e.dictType.includes(q))
    }
  }
}
</script>

<template>
  <el-form :model="element" label-width="80px" label-position="left" size="small">
    <el-form-item label="字段名称" prop="key">
      <el-input v-model="element.name" @blur="() => dynamicOnlineSave()" />
    </el-form-item>
    <el-form-item label="中文名称" prop="name">
      <el-input v-model="element.label" @blur="() => dynamicOnlineSave()" />
    </el-form-item>
    <el-form-item label="字段别名" prop="alias">
      <el-input v-model="element.alias" @blur="() => dynamicOnlineSave()" />
    </el-form-item>
    <el-form-item label="常用栅格" prop="spanType">
      <el-radio-group v-model="element.span" @input="() => dynamicOnlineSave()">
        <el-radio :label="24">24</el-radio>
        <el-radio :label="12">12</el-radio>
        <el-radio :label="6">6</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="栅格单位" prop="enName">
      <el-input-number v-model="element.span" style="width: 100%;text-align: left" :controls="false" @blur="() => dynamicOnlineSave()" />
    </el-form-item>
    <el-form-item label="组件宽度" prop="width">
      <el-input v-model="element.width" @blur="()=> dynamicOnlineSave()" />
    </el-form-item>
    <el-form-item label="字典类型" prop="dictKey">
      <el-autocomplete
        v-model="element.dictKey"
        style="width: 100%"
        lable="dictName"
        value-key="dictType"
        class="inline-input"
        :fetch-suggestions="querySearch"
        placeholder="请输入内容"
        @blur="()=> dynamicOnlineSave()"
        @select="handleSelect"
      />
    </el-form-item>
    <el-form-item label="组件类型" prop="type">
      <el-select v-model="element.type" style="width: 100%" @change="() => dynamicOnlineSave()">
        <el-option label="单行文本" value="input" />
        <el-option label="多行文本" value="textarea" />
        <el-option label="下拉选择" value="select" />
        <el-option label="日期选择" value="date" />
        <el-option label="日期时间选择" value="datetime" />
        <el-option label="单选框" value="radio" />
        <el-option label="多选框" value="checkbox" />
        <el-option label="级联选择" value="cascader" />
        <el-option label="数字输入框" value="number" />
      </el-select>
    </el-form-item>
    <el-form-item label="默认值" prop="defaultValue">
      <el-input v-model="element.defaultValue" @blur="() => dynamicOnlineSave()" />
    </el-form-item>
    <el-form-item label="占位符" prop="placeholder">
      <el-input v-model="element.placeholder" @blur="() => dynamicOnlineSave()" />
    </el-form-item>
    <el-form-item label="是否隐藏" prop="hidden">
      <el-switch v-model="element.hidden" @change="() => dynamicOnlineSave()" />
    </el-form-item>
    <el-form-item label="是否禁用" prop="disabled">
      <el-switch v-model="element.disabled" @change="() => dynamicOnlineSave()" />
    </el-form-item>
    <el-form-item label="是否只读" prop="readonly">
      <el-switch v-model="element.readonly" @change="() => dynamicOnlineSave()" />
    </el-form-item>
    <el-form-item label="可清空" prop="clearable">
      <el-switch v-model="element.clearable" @change="() => dynamicOnlineSave()" />
    </el-form-item>
    <el-form-item label="是否必填" prop="required">
      <el-switch v-model="element.required" @change="() => dynamicOnlineSave()" />
    </el-form-item>
    <el-form-item v-show="element.required" label="触发类型" prop="trigger">
      <el-select v-model="element.trigger" style="width: 100%" @change="() => dynamicOnlineSave()">
        <el-option value="blur" label="blur" />
        <el-option value="change" label="change" />
      </el-select>
    </el-form-item>
    <el-form-item v-show="element.required" label="提示消息" prop="validMessage">
      <el-input v-model="element.validMessage" @blur="() => dynamicOnlineSave()" />
    </el-form-item>
    <el-form-item label="存入变量" prop="isVariable">
      <el-switch v-model="element.isVariable" @change="() => dynamicOnlineSave()" />
    </el-form-item>
  </el-form>
</template>

<style scoped lang="scss">

</style>
